<template>
  <div class="img-upload">
    <div class="img-item" :style="itemStyle" v-for="(item, index) in imgList" :key="index">
      <image @click="previewImage(index, imgList)" class="img" :src="item" mode="aspectFill" />
      <div class="close active" @click="deleteItem(index)">
        <wd-icon name="error-fill" size="22px"></wd-icon>
      </div>
    </div>
    <div
      class="img-item active"
      :style="itemStyle"
      @click="chooseAvatar()"
      v-if="imgList.length < this.count"
    >
      <image class="img-add" src="/static/images/icon/img-add.png" />
    </div>
  </div>
</template>
<script>
import { previewImage } from '@/utils/index'

export default {
  name: 'ImgUpload',
  props: {
    modelValue: {
      type: [Array, String],
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    sizeType: {
      type: Array,
      default: () => ['compressed'],
    },
    count: {
      type: Number,
      default: 1,
    },
    itemStyle: {
      type: String,
      default: 'width: 150rpx;height: 150rpx;border-radius: 23rpx;',
    },
  },
  data() {
    return {
      previewImage,
      imgList: [],
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      deep: true,
      handler(n) {
        if (n.toString() === this.imgList.toString()) {
          return
        }
        if (Array.isArray(n) && this.multiple) {
          this.imgList = [].concat(n)
        }
        if (typeof n === 'string' && !this.multiple) {
          this.imgList = [n]
        }
      },
    },
    imgList: {
      immediate: true,
      deep: true,
      handler(n) {
        if (this.multiple) {
          this.$emit('update:modelValue', n)
        } else {
          this.$emit('update:modelValue', n.length ? n[0] : '')
        }
      },
    },
  },
  methods: {
    deleteItem(index) {
      this.imgList.splice(index, 1)
    },

    chooseAvatar() {
      const _this = this
      uni.chooseImage({
        count: 1,
        sizeType: this.sizeType,
        success(res) {
          if (res.errMsg === 'chooseImage:ok') {
            uni.showLoading()
            http
              .uploadFile(res.tempFilePaths[0])
              .then((r) => {
                _this.imgList.push(r)
              })
              .finally(() => {
                uni.hideLoading()
              })
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.img-upload {
  overflow: hidden;
  font-size: 0;
  .img-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 150rpx;
    height: 150rpx;
    margin-top: 10rpx;
    margin-right: 20rpx;
    margin-bottom: 10rpx;
    background-color: var(--bgc4);
    border-radius: 23rpx;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 23rpx;
    }
    .img-add {
      width: 66rpx;
      height: 60rpx;
    }
    .close {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      z-index: 2;
      width: 22px;
      height: 22px;
      color: var(--color1);
      background-color: #fff;
      border-radius: 50%;
    }
  }
}
</style>
